const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index.js',
        // 告诉webpack不使用
        environment: {
            arrowFunction: false,// 不使用箭头函数
            const: false, // 不使用const
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage', // 按需加载，自动引入
                                        corejs: 3
                                    }
                                ]
                            ],
                            // cacheDirectory: true, // 开启babel缓存
                            // cacheCompression: false, // 关闭缓存文件压缩
                            // plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                        }
                    },
                    "ts-loader"
                ],
                exclude: /(node_modules|bower_components)/, // 排除node_modules中的文件
            },
            {
                test: /.less$/,
                use: [ // use数组loader执行循序：从下往上依次执行
                    // 将创建style标签，将js中的样式资源插入，添加到head中生效
                    'style-loader',
                    // 将css文件变成 commonjs 模块加载到js中，里面的内容是样式字符串
                    'css-loader',
                    // postcss 解决样式兼容
                    {
                        loader: 'postcss-loader',
                        options: {
                          postcssOptions: {
                            plugins: [
                              [
                                'postcss-preset-env',
                                {
                                  // 其他选项
                                  browsers: 'last 2 versions'
                                },
                              ],
                            ],
                          },
                        },
                    },
                    'less-loader'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 复制./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
			template: './src/index.html'
        }),
    ],
    resolve: {
        extensions: ['.js', '.ts']
    },
    devServer: {
		host: 'localhost', // 域名
		port: 3001, // 端口
		open: true, // 是否自动打开浏览器
		hot: true, // 开启HMR (默认值 true)
	},
    mode: 'development'
}
